<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
	<meta charset="UTF-8" />
	<title>JQuery UX Form Selectbox</title>

	<style type="text/css">
		/* Fix the make themes look like they do on jqueryui.com */
		body {
			margin: 0;
			padding: 0 0 20px;
			min-height: 100%;
			font-family: "Arial", "Helvetica", "Verdana", "sans-serif";
			font-size: 10px;
		}
	</style>

	<link rel="stylesheet" type="text/css" href="../themes/jquery-ui-1.10.3.css" />

	<link rel="stylesheet" type="text/css" href="../themes/jquery.form.inputbox.css" />
	<link rel="stylesheet" type="text/css" href="../themes/jquery.form.selectbox.css" />

	<script type="text/javascript" src="../jquery-2.0.3.js"></script>
	<script type="text/javascript" src="../jquery-ui-1.10.3.js"></script>

	<script type="text/javascript" src="../form/jquery.form.inputbox.js"></script>
	<script type="text/javascript" src="../form/jquery.form.selectbox.js"></script>

	<script type="text/JavaScript">
		$(document).ready(
			function() {
				$("#demo select").selectbox();
			}
		);
	</script>
</head>

<body>
	<div id="demo" style="width: 300px;">
		<select name="select_dropdown" id="select_inline" multiple="multiple"> <!--  size="6" -->
			<optgroup label="Section 1">
				<option value="1">Item 1</option>
				<option value="2" selected="selected">Item 2</option>
				<option value="3">Item 3</option>
				<option value="4">Item 4</option>
			</optgroup>
			<optgroup label="Section 2">
				<option value="5">Item 5</option>
				<option value="6">Item 6</option>
				<option value="7">Item 7</option>
				<option value="8">Item 8</option>
				<option value="9">Item 9</option>
				<option value="10">Item 10</option>
			</optgroup>
		</select>

		<br />

		<select name="select_dropdown" id="select_dropdown">
			<option value="">Select one...</option>
			<optgroup label="Section 1">
				<option value="1">Item 1</option>
				<option value="2" selected="selected">Item 2</option>
				<option value="3">Item 3</option>
				<option value="4">Item 4</option>
			</optgroup>
			<optgroup label="Section 2">
				<option value="5">Item 5</option>
				<option value="6">Item 6</option>
				<option value="7">Item 7</option>
				<option value="8">Item 8</option>
				<option value="9">Item 9</option>
				<option value="10">Item 10</option>
			</optgroup>
			<optgroup label="Section 3">
				<option value="long">Really Really Long Item</option>
			</optgroup>
		</select>

	</div><!-- End demo -->

	<div class="demo-description">
		<p>
			Examples of the selectbox widget.
		</p>
	</div><!-- End demo-description -->
</body>
</html>
